<template>
  <div id="transfer-accounts">
    <c-title :hide="false" text="转账"></c-title>
    <div class="pay-info">
      <span class="upload-voucher">上传凭证</span>
      <span class="order-sty">订单：{{ pay_info }}</span>
      <span class="order-money">金额：{{ amount_info }}{{$i18n.t("元")}}</span>
      <span class="pay-voucher">付款凭证：</span>
      <div class="accounts-box">
        <div>
          <van-uploader :after-read="onRead">
            <div class="img-box avatar">
              <img :src="imageUrl
                ? imageUrl
                : require('../../../assets/images/up_icon.png')"
              />
            </div>
          </van-uploader>
        </div>
      </div>
    </div>
    <div class="tip">如是实在没有凭证请联系发货方后再点击确认</div>
    <div class="showImg" v-if="remittance_frontend_img">
      <img :src="remittance_frontend_img" alt="">
    </div>
    <section id="prompt-box">
      <div id="prompt-info">
        <div class="top-tip">
          <span class="message-sty">汇款信息</span>
          <span class="copy-sty" v-clipboard:copy="clipboardValue" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
        </div>
        <div>
          <div v-for="(item, index) in bank_info" :key='index' class="detail-style">
            {{ item.title }}: {{ item.text }}
          </div>
        </div>
        <!-- <button type="button" @click="confirmTip">确认</button> -->
      </div>
      <div id="prompt-info" class="prompt-tip">
          <div class="top-tip">
            <span class="message-sty">注意事项: 汇款时请注意一下信息, 请牢记!</span>
          </div>
          <div class="prompt-a">
            <div class="prompt-tip-top">
              1.线下公司转账订单，一个识别码对应一个订单和相应的金额，请勿多转账或者少转账。
            </div>
            <div class="prompt-tip">
              2.请在7天内付清款项，超过10天未对账系统自动会取消订单，到账周期为3个工作日起。
            </div>
          </div>
        </div>
      <div class="reason">
        <div class="title">备注</div>
        <textarea v-model="note"  rows="4"></textarea>
      </div>
    </section>

    <div class="bottom-btn">
      <span @click="onLine" class="sure-pay">在线付款</span>
      <span @click="confirmEvent" class="line-pay">确认已经汇款</span>
      <!-- <div class="btn">
        <van-row>
          <van-button type="primary" style="width: 80%; margin-bottom: 0.4rem;" @click="confirmEvent" >确认已经汇款
          </van-button
          >
        </van-row>
      </div> -->
      <!-- <div>
        <van-row>
          <van-button type="danger" style="width: 80%;" @click="onLine"
          >在线付款
          </van-button
          >
        </van-row>
      </div> -->
    </div>
  </div>
</template>

<script>
import pay_transfer_account_controller from "./pay_transfer_account_controller";

export default pay_transfer_account_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .reason{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    margin: 0.5rem;
    padding: 0.73rem 0.55rem  0.55rem;
    .title{
      color: #2b2b2b;margin-bottom: 0.6rem;
      font-weight: 600;
    }
    textarea{
      border:1px solid #ccc;
      padding: 1rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
    }
  }
  // setting sun
  .el-button--success {
    width: 80%;
    height: 130;
    margin-bottom: 60px;
  }

  .el-button--danger {
    width: 80%;
    height: 2.875rem;
  }

  #transfer-accounts {
    .pay-info {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      padding: 0.72rem 0  0.79rem 0.72rem;
      background-color: #fff;
      margin: 0.5rem 0.5rem 0 0.5rem;

      .upload-voucher {
        color: #2b2b2b;
        margin-bottom: 0.78rem;
        font-weight: 600;
      }

      .order-sty {
        line-height: 1;
        margin-bottom: 0.82rem;
        color: #666;
      }

      .order-money {
        line-height: 1;
        margin-bottom: 0.82rem;
        color: #666;
      }

      .pay-voucher {
        color: #666;
        line-height: 1;
        margin-bottom: 0.72rem;
      }

      span {
        display: flex;
      }

      .accounts-box {
        background-color: white;
        display: flex;
      }

      .img-box {
        height: 3.31rem;
        width: 3.31rem;
        border: 1px dashed #666;
        display: flex;
      }

      .avatar {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          margin: inherit;
          width: 50%;
          height: 50%;
        }
      }
    }

    .tip {
      color: #979797;
      display: flex;
      margin: 0.375rem 0.5rem 0.5rem 0.5rem;
    }

    .bottom-btn {
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 0.36rem 0.56rem;

      .sure-pay {
        padding: 0.55rem 0;
        width: 50%;
        color: white;
        background: #ff8924;
        margin-right: 0.6rem;
        border-radius: 0.25rem;
      }

      .line-pay {
        padding: 0.55rem 0;
        width: 50%;
        color: white;
        background: #ef3532;
        border-radius: 0.25rem;
      }
    }

    #prompt-box {
      // margin-top: 1.25rem;
    }

    #prompt-info {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      background: white;
      margin: 0 0.5rem 0.5rem 0.5rem;
      padding: 0.73rem 0.55rem 0 0.55rem;

      .top-tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.6rem;

        .message-sty {
          color: #2b2b2b;
          font-weight: 600;
        }

        .copy-sty {
          border: 1px solid #ef3532;
          border-radius: 0.1rem;
          color: #ef3532;
          padding: 0.28rem 0.75rem;
        }
      }

      .detail-style {
        margin-bottom: 0.725rem;
        color: #666;
      }

      .prompt-a {
        padding-bottom: 0.68rem;

        .prompt-tip-top {
          margin-top: 0.2rem;
          color: #979797;
        }

        .prompt-tip {
          margin-top: 0.85rem;
          color: #979797;
        }
      }
    }
  }
  .showImg{
    margin: 0 0.5rem;
    img{
      width: 100%;
      height: auto;
    }
  }
</style>
